<template>
  <div id="announcement-manage">
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      class="search-form"
    >
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="date"
          size="small"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="地区">
        <el-select
          size="small"
          v-model="form.area">
          <el-option label="铜陵" value="铜陵"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="关键词">
        <el-input
          size="small"
          v-model="form.key" placeholder="请输入关键词">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          @click="search(1)"
        >查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="operate-bar">
      <el-button
        size="small"
        icon="el-icon-plus"
        @click="editAnnouncement({})"
      >新建
      </el-button>
    </div>
    <el-table
      :data="list"
      v-loading="loading"
    >
      <el-table-column
        label="公告名称"
        prop="title"
        show-overflow-tooltip></el-table-column>
      <el-table-column
        label="公告内容"
        prop="content"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="发布地区"
        prop="area"
        show-overflow-tooltip></el-table-column>
      <el-table-column label="发布人" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.admin.username}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="create_time"
        show-overflow-tooltip></el-table-column>
      <el-table-column label="发布状态" prop="state"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="editAnnouncement(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="stateHandel(scope.row.id, scope.row.state)"
          >
            {{scope.row.state === '未发布' ? '发布' : '取消发布'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :page-size.sync="form.size"
        :current-page.sync="form.page"
        :total="total"
        :hide-on-single-page="true"
        @current-change="search"
      >
      </el-pagination>
    </div>
    <announcement-edit></announcement-edit>
  </div>
</template>

<script>
  import {pageSize} from "../../constant";
  import announcementEdit from './parts/edit'

  export default {
    name: "manage",
    data() {
      return {
        date: [],
        form: {
          page: 1
          , size: pageSize
          , type: 1
          , area: '铜陵'
          , key: ''
          , time_begin: ''
          , time_end: ''
        },
        edit_form: {},
        dialog_visible: false,
        list: [],
        loading: false,
        confirm_loading: false,
        total: 0
      }
    },
    watch: {
      date: {
        deep: true,
        handler(date) {
          let [start, end] = date || ['', '']
          this.form.time_begin = start
          this.form.time_end = end
        }
      }
      , $route: {
        deep: true
        , immediate: true
        , handler() {
          this.search(1)
          this.$bus.$on('announcement-list-update', () => {
            this.getList()
          })
        }
      }
    },
    methods: {
      search(page) {
        this.form.page = page
        this.getList()
      }
      , getList() {
        this.loading = true
        this.$axios
          .get('/api/v1/notices/cms', {
            params: this.form
          })
          .then(res => {
            let {total = 0, data = []} = res
            this.list = data
            this.total = total
          })
          .catch(() => {
          })
          .finally(() => {
            this.loading = false
          })
      }
      , editAnnouncement(announcement) {
        this.$bus.$emit('announcement-edit', announcement)
      }
      , stateHandel(id, state) {
        let tip = state === '未发布' ? '发布' : '取消发布'
        this.$confirm(`确认${tip}？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.$axios
            .post('/api/v1/notice/handel', {
              id,
              state: state === '未发布' ? 2 : 1
            })
            .then(res => {
              let {success, msg} = res
              if (success) {
                this.$message({
                  message: `${tip}成功`
                  , type: 'success'
                })
                this.getList()
              } else {
                this.$message({
                  message: `${tip}失败` + msg
                  , type: 'error'
                })
              }
            })
            .catch(() => {
              this.$message({
                message: `${tip}失败`
                , type: 'error'
              })
            })

        })
      }
    }
    , components: {
      announcementEdit
    }
  }
</script>

<style lang="less">
  #announcement-manage {
    .search-bar {
      padding: 7px 14px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .el-form-item {
        margin-top: 7px;
        margin-bottom: 7px;

        .el-select .el-input {
          width: 70px;
        }
      }
    }
  }
</style>